import React, { useState } from "react";
import "../../../styles/file.css";
import { Input, Space, Dropdown, Upload } from "antd";
// import Api from '../../../config/api/file';
import {
  SearchOutlined,
  LeftOutlined,
  RightOutlined,
  ArrowLeftOutlined,
  DownOutlined,
} from "@ant-design/icons";

// 图片导入
import fileIcon from "../../../assets/file/file.png";
import excelIcon from "../../../assets/file/excelIcon.png";
import demo from "../../../assets/file/demo.png";
import icon from "../../../assets/file/edit.png";
import add from "../../../assets/file/add.png";
import all from "../../../assets/file/all.png";
import recently from "../../../assets/file/recently.png";
import look from "../../../assets/file/look.png";
import upload from "../../../assets/file/upload.png";
import more from "../../../assets/file/more.png";
import feedback from "../../../assets/file/feedback.png";
import filter from "../../../assets/file/filter.png";
import excelLogo from "../../../assets/file/excelLogo.png";
import wordLogo from "../../../assets/file/wordLogo.png";
import PPTLogo from "../../../assets/file/PPTLogo.png";
import search from "../../../assets/file/search.png";
import back from "../../../assets/file/back.png";
import searchTwo from "../../../assets/file/searchTwo.png";
const { Search } = Input;

// 推荐项组件
const RecommendationItem = ({ icon, title, desc, content, preview }) => {
  return (
    <div className="search_box_content_item">
      <div className="search_box_content_item_title">
        <div className="search_box_content_item_title_left">
          <div className="title_left">
            <img
              src={icon}
              style={{ width: "25px", height: "25px", marginTop: "8px" }}
              alt=""
            />
          </div>
          <div>
            <div>{title}</div>
            <div className="title_desc">{desc}</div>
          </div>
        </div>
      </div>
      <div className="search_boxcontent">
        <div
          className="search_box_content_item_title_left"
          style={{ height: "45px" }}
        >
          <div className="title_left">
            <img
              src={excelIcon}
              style={{
                width: "26px",
                height: "25px",
                marginTop: "8px",
                marginLeft: "10px",
              }}
              alt=""
            />
          </div>
          <div style={{ lineHeight: "45px", marginLeft: "5px" }}>
            <div>{content}</div>
          </div>
        </div>
        <div className="search_boxcontent_img">
          <img src={preview} style={{ width: "100%", height: "100%" }} alt="" />
        </div>
      </div>
    </div>
  );
};

const RecommendationList = ({ icon, title, desc, content, preview }) => {
  return (
    <div
      className="search_box_content_item"
      style={{ width: "220px", height: "250px" }}
    >
      <div className="search_boxcontent">
        <div className="search_boxcontent_img">
          <img src={preview} style={{ width: "100%", height: "100%" }} alt="" />
        </div>
        <div className="search_box_content_item_title">
          <div className="search_box_content_item_title_left">
            <div className="title_left">
              <img
                src={excelIcon}
                style={{ width: "25px", height: "25px", marginTop: "8px" }}
                alt=""
              />
            </div>
            <div>
              <div>{title}</div>
              <div className="title_desc">{desc}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// 文件项组件
const FileItem = ({ file }) => {
  return (
    <li className="file-item">
      <img src={excelIcon} alt={file.type} className="file-icon" />
      <div className="file-meta">
        <div className="file-name">{file.name}</div>
      </div>
      <div className="time">{file.time}</div>
      <div
        className="time"
        style={{
          width: "250px",
          display: "flex",
          alignItems: "center",
        }}
      >
        <img
          src={file.icon}
          style={{
            width: "17px",
            height: "17px",
            marginRight: "5px",
          }}
          alt=""
        />
        {file.tip}
      </div>
    </li>
  );
};

// 搜索选项卡组件
const SearchTabs = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: "all", icon: all, text: "全部" },
    { id: "recent", icon: recently, text: "最近打开" },
  ];

  return (
    <div className="tabs-container">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`tab-item ${activeTab === tab.id ? "active" : ""}`}
          onClick={() => setActiveTab(tab.id)}
        >
          <img src={tab.icon} className="tab-icon" alt={tab.text} />
          <span className="tab-label">{tab.text}</span>
        </button>
      ))}
    </div>
  );
};

// 主组件
const TypewriterText = () => {
  const [searchValue, setSearchValue] = useState("");
  const [activeTab, setActiveTab] = useState("all");
  const [activeTabs, setActiveTabs] = useState("全部");
  const [searchStatus, setSearchStatus] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const [selectedLabel, setSelectedLabel] = useState("文件类型");
  const [selectedLabelTime, setSelectedLabelTime] = useState("最后修改时间");
  const [selectedLabelend, setSelectedLabelend] =
    useState("排序依据 相关性(默认)");
  const [listStatus, setlistStatus] = useState(false);
  const props = {
    name: "file",
    action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  // 下拉菜单配置
  const dropdownItems = {
    type: [
      { key: "1", label: "Word" },
      { key: "2", label: "Excel" },
      { key: "3", label: "PPT" },
    ],
    time: [
      { key: "1", label: "1天" },
      { key: "2", label: "七天" },
    ],
    sort: [{ key: "1", label: "选项" }],
  };

  // 文件数据
  const files = [
    {
      type: "excel",
      name: "NPP提醒需求",
      time: "10分钟前",
      tip: "你经常打开此文档",
      icon: icon,
    },
    {
      type: "word",
      name: "NPP提醒需求",
      time: "10分钟前",
      tip: "Dai, Tommy 已与你共享此项",
      icon: icon,
    },
    {
      type: "ppt",
      name: "NPP 提醒需求",
      time: "10分钟前",
      tip: "Dai, Tommy 和其他6人已编辑此文档",
      icon: icon,
    },
    {
      type: "pdf",
      name: "项目文档",
      time: "1小时前",
      tip: "最新版本已更新",
      icon: icon,
    },
  ];

  // 推荐数据
  const recommendations = [
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
  ];

  // 全部数据
  const allrecommendations = [
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
    {
      icon: fileIcon,
      title: "你经常打开它",
      desc: "昨天14:20",
      content: "NPP提醒需求",
      preview: demo,
    },
  ];

  // 处理搜索
  const handleSearch = () => {
    console.log("执行搜索:", searchValue);
    setSearchStatus(true);
  };
  const cacel = () => {
    setSearchStatus(false);
    setIsFocused(false)
  };

  // 下拉菜单处理
  const handleMenuClick =
    (type) =>
    ({ key }) => {
      const itemsMap = {
        type: dropdownItems.type,
        time: dropdownItems.time,
        sort: dropdownItems.sort,
      };
      const selectedItem = itemsMap[type].find((item) => item.key === key);

      const setterMap = {
        type: setSelectedLabel,
        time: setSelectedLabelTime,
        sort: setSelectedLabelend,
      };
      setterMap[type](selectedItem.label);
    };

  const onSearch = (value, _e, info) => console.log(info?.source, value);

  if (!searchStatus) {
    return (
      <div className="file_content">
        <div className="search_content">
          <div className="search_content_top">欢迎使用至一智能AI助手</div>
          <div
            className="search_content_bottom"
            style={{ position: "relative" }}
          >
            <Input
              value={searchValue}
              size="large"
              onChange={(e) => setSearchValue(e.target.value)}
              placeholder="搜索"
              prefix={
                isFocused ? (
                  <img
                    src={back} // 替换为你的图片路径
                    alt="search"
                    style={{
                      width: "16px", // 调整大小
                      height: "16px",
                      marginRight: "8px", // 可选：调整与输入框的间距
                      cursor: "pointer",
                    }}
                  />
                ) : (
                  <img
                    src={search} // 替换为你的图片路径
                    alt="search"
                    style={{
                      width: "16px", // 调整大小
                      height: "16px",
                      marginRight: "8px", // 可选：调整与输入框的间距
                    }}
                  />
                )
              }
              onPressEnter={handleSearch}
              onFocus={() => setIsFocused(true)}
              onBlur={() => setTimeout(() => setIsFocused(false), 200)}
              style={{
                height: "50px",
                boxShadow: "0px 2px 8.3px rgba(0, 0, 0, 0.15)",
                border: isFocused ? "1px solid #1890ff" : undefined,
              }}
            />

            {isFocused && (
              <div className="file_layer" style={{}}>
                <div className="file_layer_title">应用</div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "flex-start",
                    margin: "20px 0 ",
                  }}
                >
                  <img
                    src={excelLogo}
                    style={{ width: "68px", height: "95px" }}
                    alt=""
                  />
                  <img
                    src={wordLogo}
                    style={{ width: "68px", height: "95px", margin: "0 50px" }}
                    alt=""
                  />
                  <img
                    src={PPTLogo}
                    style={{ width: "68px", height: "95px" }}
                    alt=""
                  />
                </div>
                <div className="file_layer_title">文件</div>
                <div className="recommendation-items">
                  <ul className="file-list" style={{ marginLeft: "5px" }}>
                    {files.map((file, index) => (
                      <li
                        key={index}
                        className="file-item-second"
                        style={{ borderBottom: "none" }}
                      >
                        <img
                          src={excelIcon}
                          alt={file.type}
                          className="file-icon-second"
                        />
                        <div className="file-meta">
                          <div className="file_time_first">{file.name}</div>
                          <div className="file_time_second">{file.time}</div>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            )}
          </div>
        </div>

        <div className="search_box">
          <div className="search_box_title">
            <div className="search_box_title_left">推荐</div>
            <div className="search_box_title_right">
              <LeftOutlined style={{ marginRight: "20px", fontSize: "16px" }} />
              <RightOutlined style={{ fontSize: "16px" }} />
            </div>
          </div>
          <div className="search_box_content">
            {recommendations.map((item, index) => (
              <RecommendationItem key={index} {...item} />
            ))}
          </div>

          <div className="search_box_title" style={{ marginTop: "50px" }}>
            <div className="search_box_title_left">快速访问</div>
          </div>

          <div className="file-manager-container">
            <div className="search_tab">
              <div style={{ display: "flex", alignItems: "center" }}>
                <SearchTabs activeTab={activeTab} setActiveTab={setActiveTab} />
                <div>
                  <img
                    src={add}
                    style={{ width: "14px", height: "14px", marginLeft: "5px" }}
                    alt=""
                  />
                </div>
              </div>

              <div className="tabclass">
                <Upload {...props}>
                  <div className="upload-btn">
                    <img
                      src={upload}
                      style={{
                        width: "18px",
                        height: "18px",
                        marginLeft: "5px",
                        marginRight: "5px",
                      }}
                      alt=""
                    />
                    上传
                  </div>
                </Upload>

                <div className="tabclass">
                  <img
                    src={look}
                    style={{
                      width: "20px",
                      height: "12px",
                      marginLeft: "5px",
                      margin: "0 15px",
                      cursor: "pointer",
                    }}
                    alt=""
                    onClick={() => setlistStatus(false)}
                  />
                </div>
                <div className="tabclass">
                  <img
                    src={more}
                    style={{
                      width: "30px",
                      height: "30px",
                      marginLeft: "5px",
                      cursor: "pointer",
                    }}
                    alt=""
                    onClick={() => setlistStatus(true)}
                  />
                </div>
              </div>
            </div>
            {listStatus == false ? (
              <ul className="file-list">
                {files.map((file, index) => (
                  <FileItem key={index} file={file} />
                ))}
              </ul>
            ) : (
              <div className="search_box_content">
                {allrecommendations.map((item, index) => (
                  <RecommendationList key={index} {...item} />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="second_search">
        <Search
          prefix={
            <div
              onClick={ cacel}
              style={{
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                marginRight: 8,
              }}
            >
              <img
                src={back} // 替换为你的图片路径
                alt="search"
                style={{
                  width: "22px", // 调整大小
                  height: "22px",
                  marginRight: "8px", // 可选：调整与输入框的间距
                }}
              />
            </div>
          }
          size="large"
          placeholder="搜索"
          onSearch={onSearch}
          enterButton={
            <div style={{ display: "flex", alignItems: "center" }}>
              <img
                src={searchTwo}
                alt="search"
                style={{ width: "22px", height: "22px", marginRight: "4px" }}
              />
            </div>
          }
          style={{
            boxShadow: "0px 2px 8.3px rgba(0, 0, 0, 0.15)",
            height: "60px", // 直接设置高度
          }}
        />
      </div>

      <div style={{ width: "80%", margin: "0 auto" }}>
        <div className="tab_conent">
          <div className="tabs">
            {["全部", "文件", "站点", "人员"].map((tab) => (
              <div
                key={tab}
                className={`tab ${activeTabs === tab ? "active" : ""}`}
                onClick={() => setActiveTabs(tab)}
              >
                {tab}
              </div>
            ))}
          </div>
          <div className="tab_conent_right">
            <div className="tab_text">
              <img
                src={feedback}
                style={{ width: "15px", height: "16px", marginRight: "5px" }}
                alt=""
              />
              反馈
            </div>
            <div>搜索提示</div>
          </div>
        </div>

        <div className="select">
          <div style={{ display: "flex", alignItems: "center" }}>
            <Dropdown
              menu={{
                items: dropdownItems.type,
                onClick: handleMenuClick("type"),
              }}
              trigger={["hover"]}
            >
              <a
                onClick={(e) => e.preventDefault()}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                <span className="trigger-text">{selectedLabel}</span>
                <DownOutlined
                  style={{ fontSize: 12, color: "rgba(0,0,0,0.6)" }}
                />
              </a>
            </Dropdown>

            <div style={{ margin: "0 20px" }}>
              <Dropdown
                menu={{
                  items: dropdownItems.time,
                  onClick: handleMenuClick("time"),
                }}
                trigger={["hover"]}
              >
                <a
                  onClick={(e) => e.preventDefault()}
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 8,
                  }}
                >
                  <span className="trigger-text">{selectedLabelTime}</span>
                  <DownOutlined
                    style={{ fontSize: 12, color: "rgba(0,0,0,0.6)" }}
                  />
                </a>
              </Dropdown>
            </div>
          </div>

          <div>
            <img
              style={{ width: "15px", height: "15px", marginRight: "5px" }}
              src={filter}
              alt=""
            />
            <Dropdown
              menu={{
                items: dropdownItems.sort,
                onClick: handleMenuClick("sort"),
              }}
              trigger={["hover"]}
            >
              <a
                onClick={(e) => e.preventDefault()}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                <span className="trigger-text">{selectedLabelend}</span>
                <DownOutlined
                  style={{ fontSize: 12, color: "rgba(0,0,0,0.6)" }}
                />
              </a>
            </Dropdown>
          </div>
        </div>

        <ul className="file-list">
          {files.map((file, index) => (
            <li key={index} className="file-item">
              <img src={excelIcon} alt={file.type} className="file-icon" />
              <div className="file-meta">
                <div className="file-name">{file.name}</div>
                <div className="second_time">{file.tip}</div>
                <div className="second_time">{file.time}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

TypewriterText.defaultProps = {
  homeInfo: {},
  listenPrintHtml: () => {},
};

export default TypewriterText;
